<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/testHelper.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #e0ebff;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }

    .chart {
        height: 500px;
    }
</style>

<h1>normal</h1>
<div class="chart" id="main0"></div>
<h1>data column 0 and column 2 is not used.</h1>
<div class="chart" id="main1"></div>
<h1>category is not specified but auto-collected.</h1>
<div class="chart" id="main2"></div>


<script>
    // Schema:
    // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
    var schema = [
        {name: 'date', index: 0, text: '日期'},
        {name: 'AQIindex', index: 1, text: 'AQI指数'},
        {name: 'PM25', index: 2, text: 'PM2.5'},
        {name: 'PM10', index: 3, text: 'PM10'},
        {name: 'CO', index: 4, text: '一氧化碳 (CO)'},
        {name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
        {name: 'SO2', index: 6, text: '二氧化硫 (SO2)'},
        {name: '等级', index: 7, text: '等级'}
    ];

</script>


<script>

    require([
        'data/aqi/BJdata',
        'data/aqi/GZdata',
        'data/aqi/SHdata',
        'echarts'
    ], function (dataBJ, dataGZ, dataSH, echarts) {
        var zrUtil = echarts.util;

        var lineStyle = {
            normal: {
                width: 1
            }
        };

        var option = {
            aria: {
                show: true
            },
            animation: true,
            legend: {
                bottom: 30,
                data: ['北京', '上海', '广州'],
                itemGap: 20,
                textStyle: {
                    // color: '#fff',
                    fontSize: 16
                }
            },
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj[0].value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj[0].seriesName + ' ' + value[0] + '日期：'
                        + value[7]
                        + '</div>'
                        + schema[1].text + '：' + value[1] + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>'
                        + schema[3].text + '：' + value[3] + '<br>'
                        + schema[4].text + '：' + value[4] + '<br>'
                        + schema[5].text + '：' + value[5] + '<br>'
                        + schema[6].text + '：' + value[6] + '<br>';
                }
            },
            visualMap: {
                show: true,
                min: 0,
                max: 150,
                top: 'center',
                dimension: 2,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                outOfRange: {
                    color: ['#ccc'],
                    opacity: 0.001
                }
            },
            parallelAxis: [
                {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                {dim: 1, name: schema[1].text},
                {dim: 2, name: schema[2].text},
                {dim: 3, name: schema[3].text},
                {dim: 4, name: schema[4].text},
                {dim: 5, name: schema[5].text},
                {dim: 6, name: schema[6].text},
                {
                    dim: 7, name: schema[7].text,
                    type: 'category',
                    data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                }
            ],
            parallel: {
                bottom: 100,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 20,
                    tooltip: {
                        show: true
                    },
                    nameTextStyle: {
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            series: [
                {
                    name: '北京',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataBJ
                },
                {
                    name: '上海',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataSH
                },
                {
                    name: '广州',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataGZ
                }
            ]
        };

        var chart = testHelper.createChart(echarts, 'main0', option);

        chart && chart.on('axisAreaSelected', function (event) {
            var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
            console.log('北京: ', indices);
        });
    });

</script>


<script>

    require([
        'data/aqi/BJdata',
        'data/aqi/GZdata',
        'data/aqi/SHdata',
        'echarts'
    ], function (dataBJ, dataGZ, dataSH, echarts) {
        var zrUtil = echarts.util;

        var lineStyle = {
            normal: {
                width: 1
            }
        };

        var option = {
            animation: true,
            legend: {
                bottom: 30,
                data: ['北京', '上海', '广州'],
                itemGap: 20,
                textStyle: {
                    // color: '#fff',
                    fontSize: 16
                }
            },
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj[0].value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj[0].seriesName + ' ' + value[0] + '日期：'
                        + value[7]
                        + '</div>'
                        + schema[1].text + '：' + value[1] + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>'
                        + schema[3].text + '：' + value[3] + '<br>'
                        + schema[4].text + '：' + value[4] + '<br>'
                        + schema[5].text + '：' + value[5] + '<br>'
                        + schema[6].text + '：' + value[6] + '<br>';
                }
            },
            visualMap: {
                show: true,
                min: 0,
                max: 150,
                top: 'center',
                dimension: 2,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                outOfRange: {
                    color: ['#ccc'],
                    opacity: 0.001
                }
            },
            parallelAxis: [
                // {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                {dim: 1, name: schema[1].text},
                // {dim: 2, name: schema[2].text},
                {dim: 3, name: schema[3].text},
                {dim: 4, name: schema[4].text},
                {dim: 5, name: schema[5].text},
                {dim: 6, name: schema[6].text},
                {
                    dim: 7, name: schema[7].text,
                    type: 'category',
                    data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                }
            ],
            parallel: {
                bottom: 100,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 20,
                    tooltip: {
                        show: true
                    },
                    nameTextStyle: {
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            series: [
                {
                    name: '北京',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataBJ
                },
                {
                    name: '上海',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataSH
                },
                {
                    name: '广州',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataGZ
                }
            ]
        };

        var chart = testHelper.createChart(echarts, 'main1', option);

        chart && chart.on('axisAreaSelected', function (event) {
            var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
            console.log('北京: ', indices);
        });
    });

</script>


<script>

    require([
        'data/aqi/BJdata',
        'data/aqi/GZdata',
        'data/aqi/SHdata',
        'echarts'
    ], function (dataBJ, dataGZ, dataSH, echarts) {
        var zrUtil = echarts.util;

        var lineStyle = {
            normal: {
                width: 1
            }
        };

        var option = {
            animation: true,
            legend: {
                bottom: 30,
                data: ['北京', '上海', '广州'],
                itemGap: 20,
                textStyle: {
                    // color: '#fff',
                    fontSize: 16
                }
            },
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj[0].value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj[0].seriesName + ' ' + value[0] + '日期：'
                        + value[7]
                        + '</div>'
                        + schema[1].text + '：' + value[1] + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>'
                        + schema[3].text + '：' + value[3] + '<br>'
                        + schema[4].text + '：' + value[4] + '<br>'
                        + schema[5].text + '：' + value[5] + '<br>'
                        + schema[6].text + '：' + value[6] + '<br>';
                }
            },
            visualMap: {
                show: true,
                min: 0,
                max: 150,
                top: 'center',
                dimension: 2,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                outOfRange: {
                    color: ['#ccc'],
                    opacity: 0.001
                }
            },
            parallelAxis: [
                // {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                {dim: 1, name: schema[1].text},
                // {dim: 2, name: schema[2].text},
                {dim: 3, name: schema[3].text},
                {dim: 4, name: schema[4].text},
                {dim: 5, name: schema[5].text},
                {dim: 6, name: schema[6].text},
                {
                    dim: 7, name: schema[7].text,
                    type: 'category'
                    // data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                }
            ],
            parallel: {
                bottom: 100,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 20,
                    tooltip: {
                        show: true
                    },
                    nameTextStyle: {
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            series: [
                {
                    name: '北京',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataBJ
                },
                {
                    name: '上海',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataSH
                },
                {
                    name: '广州',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataGZ
                }
            ]
        };

        var chart = testHelper.createChart(echarts, 'main2', option);

        chart && chart.on('axisAreaSelected', function (event) {
            var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
            console.log('北京: ', indices);
        });
    });

</script>


</body>
</html>
